'use client'  //useState等钩子要求运行在“客户端组件”中，而不是Next.js默认的服务器端组件
import ResidentDetailsModal from '@/components/ResidentDetailsModal'
import { adminHouseholdList } from '@/service'
import { SearchOutlined } from '@ant-design/icons'
import { Button, Col, Divider, Input, Popconfirm, Row, Space, Table, Typography } from 'antd'
import React, { useEffect, useState } from 'react'

export default function Resident() {
  //状态变量 —— 当前是否打开“居民详情模态对话框”
  let [showResidentDetailsModal, setShowResidentDetailsModal] = useState(false)
  /*****分页查询必需的五个变量******/
  //状态变量 —— 待查询的居民姓名关键字
  let [kw, setKw] = useState('')
  //状态变量 —— 当前加载到哪一页数据了
  let [pageNum, setPageNum] = useState(0)
  //状态变量 —— 符合查询条件的记录总页数
  let [pageCount, setPageCount] = useState(99999)
  //状态变量 —— 当前加载到的数据(PC端应用就要“狗熊掰棒子”)
  let [residentList, setResidentList] = useState([])
  //状态变量 —— 当前是否正在加载中
  let [isLoading, setIsLoading] = useState(false)
  //状态变量(antd提供的Pagination特需的变量) —— 满足条件的数据总行数
  let [recordCount, setRecordCount] = useState(0)
  //状态变量(antd提供的Pagination特需的变量) —— 页面大小，即每页最多显示的数据行数
  let [pageSize, setPageSize] = useState(6)

  /*****分页查询必需的一个方法*****/
  let loadData = async (pno)=>{     //形参pno表示要加载的页号
    //1.如果当前正在加载中 或者 已经没有更多数据了，则退出
    if(isLoading || pno>pageCount){
      return
    }
    //2.设置“正在加载中”为真
    setIsLoading(true)
    //3.异步请求服务器端接口数据，注意：PC端应用中新数据到来时替换旧数据即可
    let data = await adminHouseholdList(pno, kw)
    data.data = data.data.map(r=>{return {  //为每个“居民对象”增加了一个key属性，用于表格渲染(每个居民对象都会生成一个tr,要求必须有唯一的key)
      ...r,
      key: r.hid
    }})
    console.log(data) 
    setPageNum(data.pageNum)              //当前页号
    setPageCount(data.pageCount)          //总页数
    setRecordCount(data.recordCount)      //满足条件的数据总行数
    setPageSize(data.pageSize)            //每页最多显示的记录行数
    setResidentList(data.data)            //新数据直接替换旧数据
    //4.设置“正在加载中”为假
    setIsLoading(false)
  }

  /*****分页查询方法调用情形1：组件挂载时*****/
  useEffect(()=>{
    ;(async()=>{
      loadData(1)
    })()
  }, [])


  return (
    <div style={{padding:'10px'}}>
      {/* F1：顶部标题 */}
      <Typography.Title level={5}>居民信息</Typography.Title>
      <Divider style={{margin:'5px  0  10px'}}/>
      {/* F2：上方的按钮组和搜索框组 */}
      <Row>
        <Col style={{flex: 1}}>
          {/* Space：为包含的组件间添加空白 */}
          {/* Space.Compact：紧凑的空白，把包含的组件交接处合并到一起 */}
          <Space.Compact>
            <Button>添加新的</Button>
            <Button>批量删除</Button>
            <Button>批量导入</Button>
            <Button>导出选中</Button>
            <Button>导出所有</Button>
          </Space.Compact>
        </Col>
        <Col>
          <Space.Compact>
            {/* onPressEnter：指定用户在输入框中按下“回车键”的处理方法 */}
            <Input
              placeholder='请输入姓名关键字' 
              onChange={e=>setKw(e.target.value)} 
              onPressEnter={_=>{pageCount=9999;loadData(1)}}/>
            <Button 
              icon={<SearchOutlined/>} 
              onClick={_=>{pageCount=9999;loadData(1)}}/>
          </Space.Compact>
        </Col>
      </Row>
      {/* F3：数据表格和分页条 —— Table */}
      <Table
        style={{marginTop:'10px'}}
        columns={[                    //定义所有的列
          {key:'c0', title:'序号', dataIndex:'hid'},
          {key:'c1', title:'业主编号', dataIndex:'householdId'},
          {key:'c2', title:'姓名', dataIndex:'householdName'},
          {key:'c3', title:'性别', dataIndex:'gender', render:v=><span>{v==1?'男':'女'}</span>}, //render属性用于将数据“渲染”为另一种形式
          {key:'c4', title:'电话', dataIndex:'phone'},
          {key:'c5', title:'操作', dataIndex:'hid', render:id=><Space size='small'>
            <Button size='small' onClick={_=>setShowResidentDetailsModal(true)}>详情</Button>
            <Button size='small' onClick={_=>console.log(id)}>修改</Button>
            {/* 弹出式气泡确认框 */}
            <Popconfirm title="提示" description="删除操作不可撤销！您确认吗？"
              okText="确定"  cancelText="放弃"
              onConfirm={_=>console.log(id)}>
              <Button size='small'>删除</Button>
            </Popconfirm>
          </Space>},
        ]}
        dataSource={residentList}     //指定要渲染的数据源(即要显示哪些数据行)
        rowSelection={{               //行选定，只要出现该属性，表格最左侧会添加“复选框列”
          onChange:keys=>console.log(keys)
        }} 
        loading={isLoading}           //指定当前是否正在加载数据，“是”的话在表格上方会呈现动画图标
        pagination={{                 //表格的“分页器”属性会自动在表格下方创建一个Pagination组件
          position: ['bottomCenter'],     //分页器出现的位置，可以在多个位置同时出现
          total: recordCount,             //满足条件的总记录数
          pageSize: pageSize,             //页面大小，即每页最多显示的记录数
          showSizeChanger: false,         //是否显示“页面大小修改器”
          /*****加载页面数据调用情形2：用户点击了分页条中的其它页号*****/
          onChange: num=>loadData(num),    //分页器中选中的“当前页”改变
        }}                   
      />
      {/* 模态对话框1：居民详情 */}
      <ResidentDetailsModal 
        isOpen={showResidentDetailsModal} 
        close={_=>setShowResidentDetailsModal(false)}/>
    </div>
  )
}
